<template>
  <el-form ref="matchForm" :model="matchForm" class="el-row" :rules="rules" label-width="120px">
    <el-form-item class=" el-col-23" label="数据范围：" prop="unit">
      <district-select v-model="dataRange" @change="changeUnit" />
    </el-form-item>
    <el-form-item class=" el-col-23" label="任务名称：" prop="name">
      <el-input v-model="matchForm.name"></el-input>
    </el-form-item>
    <el-form-item class=" el-col-23" label="用户名：">
      <el-input v-model="matchForm.user" disabled></el-input>
    </el-form-item>
    <el-form-item class=" el-col-23" label="单位：">
      <el-input v-model="factory" disabled></el-input>
    </el-form-item>
    <el-form-item class="el-col-23">
      <el-button type="primary" @click="addNum"> 添加数据来源</el-button>
    </el-form-item>
    <div class="el-col-24" v-for="(option,i) in fileList">
      <el-form-item class="el-col-10" label="导入数据：">
        <el-upload :before-upload="(file)=>beforeUpload(file,i)" action="">
          <div v-if="option.file">
            <div class="aaa" :title="option.file.name">{{option.file.name}}</div>
          </div>
          <div v-else>
            <el-button type="primary">点击上传</el-button>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item class=" el-col-10 el-col-offset-1" label="数据来源：">
        <el-input v-model="option.source"></el-input>
      </el-form-item>
      <el-form-item v-show="i>0" class="el-col-1 el-col-offset-1" label-width="0">
        <i class="el-icon-delete" style="color:red" @click="deleteNum"></i>
      </el-form-item>

    </div>

    <el-form-item class=" el-col-23" label="AI匹配度：">
      <span>高于</span>
      <el-input v-model="AInum" style="width:50px;margin:0 5px"></el-input>
      <span>%</span>
    </el-form-item>
    <el-form-item class="el-col-24" label-width="0" style="text-align: center;cursor: pointer;">
      <el-button type="primary" @click="handleClick">确定</el-button>
      <el-button type="error" @click="closeDialog"> 取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import districtSelect from '../districtSelect.vue'

import { taskCreate } from '@/api/oneCodeAddress'

export default {
  data () {
    return {
      dataRange: [],
      matchForm: {
        unit: '',
        user: '李建',
        name: '',
        source: '',
        type: '3',
        checkType: '一码多址匹配',
        file: ''
      },
      AInum: 90,
      rules: {
        unit: [{ required: true, message: '请选择数据范围' }],
        name: [{ required: true, message: '请输入任务名称' }],
        file: [{ required: true, message: '请选择要导入的数据' }]
      },
      factory: '省政务服务和数据管理局',
      fileList: [{
        file: '',
        source: ''
      }]

    }
  },
  watch: {
    // fileList: {
    //   handler (newVal, oldVal) {
    //     this.rules = {
    //       unit: [{ required: true, message: '请选择数据范围' }],
    //       name: [{ required: true, message: '请输入任务名称' }],
    //       file0: [{ required: true, message: '请选择要导入的数据' }]
    //     }
    //     if (newVal.length > 1) {
    //       newVal.forEach((item, i) => {
    //         if (i > 0) {
    //           this.rules.file[i] = [{ required: true, message: '请选择要导入的数据' }]
    //         }
    //       })
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    addNum () {
      this.fileList.push({
        file: '',
        source: ''
      })
    },
    deleteNum (index) {
      this.fileList.splice(index, 1)
    },
    beforeUpload (file, index) {
      this.$set(this.fileList[index], 'file', file)
      return false
    },
    changeUnit (value) {
      this.matchForm.unit = value[value.length - 1]
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    handleClick () {
      this.$refs.matchForm.validate(async valid => {
        if (valid) {
          const res = await taskCreate(this.matchForm)
          if (res.status === 200) {
            this.$message.success('新增任务成功')
            this.$emit('closeDialog')
          } else {
            this.$message.error('新增任务失败！ 请检查')
          }
        }
      })

    }
  },
  components: {
    districtSelect
  }
}
</script>


<style lang="less">
.aaa {
  cursor: pointer;
  width: 150px;
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis; //溢出显示省略号
  white-space: normal; //常规默认，会折行
  display: -webkit-box;
  -webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
  -webkit-line-clamp: 1; /*内容限制的行数 需要几行写几就行*/
}
</style>